<template>
    <div class="nav">
		<div class="logoCon">
			<img class="logoImg" :src="this.$store.state.user.appAvatar" alt="">
		</div>
		<div class="list">
			<!-- <div class="item" :class="{act : $route.meta.nav == 'home'}" @click.stop="$router.replace('/')">
				<i class="el-icon-menu"></i>
				<span>概况</span>
			</div> -->
			<div class="item" :class="{act : $route.meta.nav == 'service'}" @click.stop="$router.replace('/')">
				<i class="el-icon-service"></i>
				<span>客服</span>
			</div>
			<!-- <div class="item" :class="{act : $route.meta.nav == 'chat'}" @click.stop="$router.replace('/chat')">
				<i class="el-icon-menu"></i>
				<span>聊天</span>
			</div> -->
			<!-- <div class="item" :class="{act : $route.meta.nav == 'client'}" @click.stop="$router.replace('/client')">
				<i class="el-icon-menu"></i>
				<span>客户</span>
			</div> -->
			<!-- <div class="item" :class="{act : $route.meta.nav == 'data'}" @click.stop="$router.replace('/data')">
				<i class="el-icon-menu"></i>
				<span>数据</span>
			</div> -->
			<div v-if="$isAdmin()" class="item" :class="{act : $route.meta.nav == 'setting'}" @click.stop="$router.replace('/setting/staff')">
				<i class="el-icon-setting"></i>
				<span>设置</span>
			</div>
			<!-- <div class="item" :class="{act : $route.meta.nav == 'develop'}" @click.stop="$router.replace('/develop')">
				<i class="el-icon-setting"></i>
				<span>开发</span>
			</div> -->
		</div>

		<el-dropdown @command="clickDropdown">
			<span class="el-dropdown-link">
				<div class="bottom">
					<img class="avatar" :src="this.$store.state.user.avatar" alt="">
					<div class="name">{{this.$store.state.user.name}}</div>
				</div>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="logout">退出登录</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		
    </div>
</template>
<script>

	export default {
		data() {
			return {

			}
		},
		methods: {
			clickDropdown(e){
				this[e]()
			},
			logout(){
				// 清除本地
				this.$reqPost("/api/logout",{

                }).then(res => {
					this.$message({
                        message: '您已退出登录',
                    });

					localStorage.removeItem('sessionId');
					
					location.reload()
                },err=>{

                })
			}
		},
		mounted() {

		},
    }
</script>

<style lang="scss" scoped>
	.nav{
		background-color: rgb(68, 68, 68);
		color: #cacaca;
		width: 90px;
		height: 100vh;;
		position: absolute;
		left: 0;
	}
	.logoCon{
		text-align: center;
		cursor: pointer;
		height: 52px;
		.logoImg{
			width: 40px;
			height: 40px;
			margin-top: 10px;
		}
	}
	.list{
		overflow: hidden;
		font-size: 14px;
		height: calc(100vh - 52px - 70px);
	}
	.item{
		margin: 8px 0;
		padding: 10px 0;
		padding-left: 15px;
		cursor: pointer;
	}
	.item:hover{
		background: #666;
		color: #fff;
	}
	.act{
		background: #fff;
		color: #333;
	}
	.act:hover{
		background: #fff;
		color: #333;
	}
	.el-dropdown{
		width: 100%;
	}
	.bottom{
		height: 70px;
		overflow: hidden;
		text-align: center;
		border-top: 1px solid #cacaca;
		padding-top: 8px;
		cursor: pointer;
		.avatar{
			width: 35px;
			height: 35px;
		}
		.name{
			color: #cacaca;
			margin-top: 5px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding: 0 5px;
		}
	}
</style>
